<template>
  <view class="function-item" @tap="onClick">
    <view class="function-icon">
      <u-icon :name="icon" color="#FF9FB5" size="36"></u-icon>
    </view>
    <text class="function-name">{{ name }}</text>
  </view>
</template>

<script setup lang="ts">
// 定义props
const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  name: {
    type: String,
    required: true
  }
});

// 定义emit
const emit = defineEmits(['click']);

// 点击事件
const onClick = () => {
  emit('click');
};
</script>

<style lang="scss" scoped>
.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.function-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 159, 181, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12rpx;
  transition: transform 0.2s;
}

.function-item:active .function-icon {
  transform: scale(1.05);
}

.function-name {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}
</style> 